import { computed, defineAsyncComponent, defineComponent, ref, unref, watch } from 'vue';
import { Divider } from 'ant-design-vue';
import { useStore } from 'vuex';
import { getRosaryChinese, usePompei, useRosary } from '/@/hooks/usePrayers';
import {
  renderFather,
  renderMary,
  renderFaith,
  renderGlory,
  renderQueen,
  registerModal,
} from '../util';
import {
  componentMap as petitionComponentMap,
  PetitionComponentType,
} from '../components/petition';
import { componentMap as graceComponentMap, GraceComponentType } from '../components/grace';
import MyModal from '../../MyModal';
import { getStartDate, StartDate } from '/@/hooks/useStartDate';
import { appStore } from '/@/store/modules/app';

export default defineComponent({
  name: 'rosary',
  props: {
    rosaryName: {
      type: String,
      default: '',
    },
  },
  components: { MyModal },
  setup(props) {
    const rosaryData = computed(() => useRosary()[props.rosaryName]);

    const startDate = computed(() => {
      return unref(getStartDate) as StartDate;
    });

    const intention = appStore.getIntention;
    const projectSetting = appStore.getProjectSetting;
    const pompeiname = computed(() => {
      return unref(startDate).pompei;
    });
    const pompeiData = computed(() => {
      return usePompei(unref(pompeiname) as string);
    });
    const rosaryChinese = getRosaryChinese();
    function setPom() {}
    setPom();

    watch(
      () => unref(startDate).isPetition,
      (newvalue) => {
        setPom();
      }
    );

    function renderPompei(index: number) {
      const { parse } = unref(pompeiData).content[index]?.content;

      const Comp = (unref(startDate).isPetition
        ? petitionComponentMap.get(parse)
        : graceComponentMap.get(parse)) as typeof defineComponent;
      return (
        <>
          <div class="red-background mt-md mb">
            <div class="text-sm text-center text-red">祷文</div>
            <Comp />
          </div>
        </>
      );
    }

    function renderSong(word: string) {
      return unref(projectSetting).showSong ? (
        <>
          <div>
            <div class="text-sm text-center">唱词</div>
            <div>{word}</div>
          </div>
        </>
      ) : null;
    }

    function renderStart() {
      const parse = unref(startDate).isPetition ? `petitionStart` : `graceStart`;
      // const startComp = defineAsyncComponent(() => import(`./../components/${parse}.vue`));
      const Comp = (unref(startDate).isPetition
        ? petitionComponentMap.get(parse as PetitionComponentType)
        : graceComponentMap.get(parse as GraceComponentType)) as typeof defineComponent;
      return (
        <>
          <div>
            <Comp />
          </div>
        </>
      );
    }

    function renderEnd() {
      const parse = unref(startDate).isPetition ? `petitionEnd` : `graceEnd`;
      // const startComp = defineAsyncComponent(() => import(`./../components/${parse}.vue`));
      const Comp = (unref(startDate).isPetition
        ? petitionComponentMap.get(parse as PetitionComponentType)
        : graceComponentMap.get(parse as GraceComponentType)) as typeof defineComponent;
      return (
        <>
          <div class="red-background">
            <h3 class="text-sm text-center text-red">结束祷文</h3>
            <Comp />
          </div>
        </>
      );
    }

    return () => (
      <>
        <div>
          <div class="red-border">
            <h1 class="text-red text-center text-lg mt-md">
              【{rosaryChinese[props.rosaryName]}】
            </h1>
            {renderStart()}
          </div>
          <div class="red-border">
            <div class="yellow-border">
              {renderFaith()}
              {renderFather()}
              {renderMary('圣母经三遍')}
              {renderGlory()}
            </div>
          </div>
          {unref(rosaryData).map((item: { title: string; songword: string }, index: number) => (
            <>
              <div class="red-border">
                <h3 class="text-red text-center text-md mt-md">{item?.title}</h3>
                <div class="yellow-border">
                  {renderFather()}
                  {renderMary()}
                  {renderGlory()}
                  {renderSong(item.songword)}
                </div>
                {renderPompei(index)}
                {renderQueen()}
              </div>
            </>
          ))}
          <div class="red-border">{renderEnd()}</div>
          <MyModal onRegister={registerModal} />
        </div>
      </>
    );
  },
});
